<!-- 设备列表 -->
<template>
  <app-page card full>
    <template #header>设备列表</template>

    <app-page-main>
      <template #header>
        <el-form
          :inline="true"
          :model="pageData.query"
          @submit.prevent="pageActions.handleSearch"
          @keyup.enter="pageActions.handleSearch"
        >
          <el-form-item label="设备mac">
            <el-input v-model="pageData.query.deviceMac" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="所属排/行">
            <el-input v-model="pageData.query.seatRow" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="所属列">
            <el-input v-model="pageData.query.seatCol" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="注册时间" style="width: 500px">
            <DatePicker
              v-model:start="pageData.query.registerStartTime"
              v-model:end="pageData.query.registerEndTime"
            />
          </el-form-item>
          <el-form-item label="最近上线时间" style="width: 500px">
            <DatePicker
              v-model:start="pageData.query.onlineStartTime"
              v-model:end="pageData.query.onlineEndTime"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="search" @click="pageActions.handleSearch">搜索</el-button>
            <el-button icon="refresh" @click="pageActions.handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <el-table v-loading="pageData.loading" :data="pageData.data">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="deviceMac" label="设备mac" />
        <el-table-column prop="seatRow" label="所属排/行" />
        <el-table-column prop="seatCol" label="所属列" />
        <el-table-column prop="createdAt" label="注册时间" />
        <el-table-column prop="onlineTime" label="最近上线时间" :formatter="onFormatter" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button link type="primary" icon="remove" @click="handleUnbind(row)">
              解绑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <div class="app-toolbar" v-if="$route.query.id">
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      />
    </template>
  </app-page>
</template>

<script setup>
import DatePicker from '@/components/form/DatePicker.vue'
import { usePageList, http } from 'jax-node'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const { pageData, pageActions, onFormatter } = usePageList({
  api: 'device',
  query: {
    roomId: route.query.id,
  },
})

const handleUnbind = row => {
  ElMessageBox.confirm('是否确认解绑?', '温馨提示', {
    type: 'warning',
  }).then(() => {
    http({
      url: `${pageData.api}/${row.id}`,
      method: 'DELETE'
    }).then(() => {
      ElMessage.success('操作成功')
      pageActions.refresh()
    })
  })
}
</script>
